<template>
  <div class="merchant-page">
    <div>
      <el-form>
        <el-form-item label="商家账号：">
           <el-input placeholder="请输入商家账号" v-model="searchForm.phone" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="淘宝收费方案：" v-if="isShowScheme[1]">
          <el-select v-model="searchForm.tb" placeholder="请选择淘宝收费方案" size="small">
            <el-option v-for="(item, index) in tbSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="天猫收费方案：" v-if="isShowScheme[2]">
          <el-select v-model="searchForm.tm" placeholder="请选择天猫收费方案" size="small">
            <el-option v-for="(item, index) in tmSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="1688收费方案：" v-if="isShowScheme[4]">
          <el-select v-model="searchForm.albb" placeholder="请选择1688收费方案" size="small">
            <el-option v-for="(item, index) in albbSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="京东收费方案：" v-if="isShowScheme[3]">
          <el-select v-model="searchForm.jd" placeholder="请选择京东收费方案" size="small">
            <el-option v-for="(item, index) in jdSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="唯品会收费方案：" v-if="isShowScheme[13]">
          <el-select v-model="searchForm.vip" placeholder="请选择唯品会收费方案" size="small">
            <el-option v-for="(item, index) in wphSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拼多多收费方案：" v-if="isShowScheme[15]">
          <el-select v-model="searchForm.pdd" placeholder="请选择拼多多收费方案" size="small">
            <el-option v-for="(item, index) in pddSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="抖音收费方案：" v-if="isShowScheme[16]">-->
<!--          <el-select v-model="searchForm.tiktok" placeholder="请选择抖音收费方案" size="small">-->
<!--            <el-option v-for="(item, index) in onedragmoreSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item><el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button></el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" border>
        <el-table-column prop="phone" label="商家账号"></el-table-column>
        <el-table-column prop="tb" label="淘宝" v-if="isShowScheme[1]">
          <div slot-scope="scope">
            <router-link :to="{path: 'merchantCharges',query:{scheme:scope.row.tb_id,platformType:1}}">{{scope.row.tb}}</router-link>
          </div>
        </el-table-column>
        <el-table-column prop="tm" label="天猫" v-if="isShowScheme[2]">
          <div slot-scope="scope">
            <router-link :to="{path: 'merchantCharges',query:{scheme:scope.row.tm_id,platformType:2}}">{{scope.row.tm}}</router-link>
          </div>
        </el-table-column>
        <el-table-column prop="albb" label="1688" v-if="isShowScheme[4]">
          <div slot-scope="scope">
            <router-link :to="{path: 'merchantCharges',query:{scheme:scope.row.albb_id,platformType:4}}">{{scope.row.albb}}</router-link>
          </div>
        </el-table-column>
        <el-table-column prop="jd" label="京东" v-if="isShowScheme[3]">
          <div slot-scope="scope">
            <router-link :to="{path: 'merchantCharges',query:{scheme:scope.row.jd_id,platformType:3}}">{{scope.row.jd}}</router-link>
          </div>
        </el-table-column>
        <el-table-column prop="vip" label="唯品会" v-if="isShowScheme[13]">
          <div slot-scope="scope">
            <router-link :to="{path: 'merchantCharges',query:{scheme:scope.row.vip_id,platformType:13}}">{{scope.row.vip}}</router-link>
          </div>
        </el-table-column>
        <el-table-column prop="pdd" label="拼多多" v-if="isShowScheme[15]">
          <div slot-scope="scope">
            <router-link :to="{path: 'merchantCharges',query:{scheme:scope.row.pdd_id,platformType:15}}">{{scope.row.pdd}}</router-link>
          </div>
        </el-table-column>
        <el-table-column prop="onedragmore" label="抖音" v-if="isShowScheme[20]">
          <div slot-scope="scope">
            <router-link :to="{path: 'merchantCharges',query:{scheme:scope.row.onedragmore_id,platformType:20}}">{{scope.row.onedragmore}}</router-link>
          </div>
        </el-table-column>
        <el-table-column prop="product_id" label="操作">
          <div slot-scope="scope">
            <el-button class="set-btn" @click="setScheme(scope.row)">立即设置</el-button>
          </div>
        </el-table-column>
      </el-table>
      <div class="block" style="margin: 20px 0px; text-align: right;">
      	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
      	 :page-sizes="[10, 15, 20, 25]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
      </div>
      <el-dialog title="设置收费方案" :visible.sync="isShowSetDialog" width="500px">
        <div>
          <el-form>
            <el-form-item label="淘宝收费方案：" v-if="isShowScheme[1]">
              <el-select v-model="setSchemeForm.tbScheme" placeholder="请选择淘宝收费方案" size="small">
                <el-option v-for="(item, index) in tbSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="天猫收费方案：" v-if="isShowScheme[2]">
              <el-select v-model="setSchemeForm.tmScheme" placeholder="请选择天猫收费方案" size="small">
                <el-option v-for="(item, index) in tmSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="1688收费方案：" v-if="isShowScheme[4]">
              <el-select v-model="setSchemeForm.albbScheme" placeholder="请选择1688收费方案" size="small">
                <el-option v-for="(item, index) in albbSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="京东收费方案：" v-if="isShowScheme[3]">
              <el-select v-model="setSchemeForm.jdScheme" placeholder="请选择京东收费方案" size="small">
                <el-option v-for="(item, index) in jdSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="唯品会收费方案：" v-if="isShowScheme[13]">
              <el-select v-model="setSchemeForm.vipScheme" placeholder="请选择唯品会收费方案" size="small">
                <el-option v-for="(item, index) in wphSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="拼多多收费方案：" v-if="isShowScheme[15]">
              <el-select v-model="setSchemeForm.pddScheme" placeholder="请选择拼多多收费方案" size="small">
                <el-option v-for="(item, index) in pddSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="抖音收费方案：" v-if="isShowScheme[20]">
              <el-select v-model="setSchemeForm.onedragmoreScheme" placeholder="请选择抖音收费方案" size="small">
                <el-option v-for="(item, index) in onedragmoreSchemeData" :key="index" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowSetDialog = false" class="cancle-btn">取 消</el-button>
          <el-button class="confirm-btn" :disabled="submitOptLoading" :loading="submitOptLoading" @click="submitPlan">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  apiMerchantFeeScheme,
  apiSetMerchantFee,
  apiPromoterFeeList
} from '../../request/api';
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        token: window.sessionStorage.getItem('token'),
        page: 1,
        limit: 10,
        tb: '',
        tm: '',
        jd: '',
        vip: '',
        pdd: '',
        tiktok: '',
        albb: '',
        phone: ''
      },
      setSchemeForm:{
        token: window.sessionStorage.getItem('token'),
        merchantId: '',
        tbScheme: '',
        tmScheme: '',
        jdScheme: '',
        albbScheme: '',
        vipScheme: '',
        pddScheme: '',
        onedragmoreScheme: '',
      },
      tbSchemeData: [],
      tmSchemeData: [],
      jdSchemeData: [],
      albbSchemeData: [],
      pddSchemeData: [],
      onedragmoreSchemeData: [],
      wphSchemeData: [],
      shopTypeData: [{
          label: '淘宝',
          value: 1
        },{
          label: '天猫',
          value: 2
        },{
          label: '京东',
          value: 3
        },{
          label: '1688',
          value: 4
        },{
          label: '唯品会',
          value: 13
        },{
          label: '拼多多',
          value: 15
        },{
        label: '抖音',
        value: 16
      }],
        submitOptLoading: false,
        isShowSetDialog:false,
        pageTotal: 0,
        shopTypeList: window.sessionStorage.getItem("shopTypeList"),
        isShowScheme: {
          1: false,
          2: false,
          3: false,
          4: false,
          13: false,
          15: false,
          20: false,
        }
    };
  },
  created() {
    if(!this.shopTypeList || this.shopTypeList == null){
      this.isShowScheme = {
        1: false,
        2: false,
        3: false,
        4: false,
        13: false,
        15: false,
        20: false,
      }
    } else {
      console.log(this.shopTypeList.split(','))
      // this.shopTypeList.split(',').map(num => {
      //   if(!this.isShowScheme[parseInt(num)]) this.isShowScheme[parseInt(num)] = true
      //   return num
      // })
      let shopShowTypeArr = this.shopTypeList.split(',')
      for(var i in shopShowTypeArr){
        if(!this.isShowScheme[parseInt(shopShowTypeArr[i])]){
          this.isShowScheme[parseInt(shopShowTypeArr[i])] = true
        }
      }
    }
    this.getSchemeData()
    this.getTableData()

  },
  methods: {
    getSchemeData(){
      this.tbSchemeData = []
      this.tmSchemeData = []
      this.jdSchemeData = []
      this.albbSchemeData = []
      this.pddSchemeData = []
      this.wphSchemeData = []
      this.onedragmoreSchemeData = []
      apiPromoterFeeList({
        token: window.sessionStorage.getItem('token')
      })
        .then(res => {
        if(res.code==1){
          let data = res.msg
          for(var i in res.msg){
            if(data[i].platform_type == 0 || data[i].platform_type==1){
              this.tbSchemeData.push(data[i])
            }
            if(data[i].platform_type == 0 || data[i].platform_type==2){
              this.tmSchemeData.push(data[i])
            }
            if(data[i].platform_type == 0 || data[i].platform_type==3){
              this.jdSchemeData.push(data[i])
            }
            if(data[i].platform_type == 0 || data[i].platform_type==4){
              this.albbSchemeData.push(data[i])
            }
            if(data[i].platform_type == 0 || data[i].platform_type==13){
              this.wphSchemeData.push(data[i])
            }
            if(data[i].platform_type == 0 || data[i].platform_type==15){
              this.pddSchemeData.push(data[i])
            }
            if(data[i].platform_type == 0 || data[i].platform_type==20){
              this.onedragmoreSchemeData.push(data[i])
            }
          }
        }
      })
      .catch(res => {

      });
    },
    setScheme(row) {
      this.isShowSetDialog = true;
      this.setSchemeForm = {
        token: window.sessionStorage.getItem('token'),
        merchantId: row.id,
        tbScheme: row.tb_id,
        tmScheme: row.tm_id,
        jdScheme: row.jd_id,
        albbScheme: row.albb_id,
        vipScheme: row.vip_id,
        pddScheme: row.pdd_id,
        onedragmoreScheme: row.onedragmore_id,
      }
    },
    submitPlan() {
      this.submitOptLoading = true
      apiSetMerchantFee(this.setSchemeForm)
        .then(res => {
          this.submitOptLoading = false
        if(res.code == 1){
          this.$message.success('设置成功')
          this.getTableData()
          this.isShowSetDialog = false
        } else {
          this.$message.error(res.msg)
        }

      })
      .catch(res => {
        this.submitOptLoading = false
      });
    },
    getTableData() {
       this.$showLoading()
      apiMerchantFeeScheme(this.searchForm)
        .then(res => {
        this.tableData = res.data
        this.pageTotal = res.count
        this.$hideLoading()
      })
      .catch(res => {
        this.$hideLoading()
        this.$message.error('数据加载失败')
      });
    },
    searchData() {
      this.getTableData();
    },
    handleSizeChange(val){
        this.searchForm.pageSize = val;
        this.getTableData()
    },
    handleCurrentChange(val){
        this.searchForm.page = val;
        this.getTableData()
    },
  }
};
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
@import '../../assets/css/style.less';
.commissionText {
  text-align: right;
  color: red;
  margin-bottom: 10px;
}
.set-btn {
  padding: 8px 15px;
  color: #ffffff;
  background: @themeColor;
}

.confirm-btn {
  background: @themeColor;
  color: #ffffff;
}
</style>
